<template>
    <div class="baseBox">
        <pagetitle></pagetitle>
        <div class="warmprompt">
            <div class="warmprompttitle">土地基本信息</div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="土地资源名称">
                    <el-input v-model="formInline.user" placeholder="输入地块的名称"></el-input>
                </el-form-item>
                <el-form-item label="土地资源性质">
                    <el-select v-model="formInline.region" placeholder="农用地">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="土地资源类型">
                    <el-select v-model="formInline.region" placeholder="果园">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同面积">
                    <el-select v-model="formInline.region" placeholder="合同总面积（亩）">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="土地资源位置">
                    <addRess placeholder="请选择土地资源位置" class="addRess"></addRess>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="formInline.user" class="addRess" placeholder="请输入地块具体位置"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="baseBoxContent">
            <div class="baseBoxsearch">
                <div class="basesright">
                    <!-- <el-input v-model="input" class="input" suffix-icon="el-icon-search" placeholder="请输入内容"></el-input> -->
                    <el-button type="primary" size="default">导出土地清单</el-button>
                    <el-button @click="router.push('/resource/land/industry')" size="default">添加新地块</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="文本编号" width="88"> </el-table-column>
                <el-table-column prop="name" label="登记时间"> </el-table-column>
                <el-table-column prop="address" label="土地所有权"> </el-table-column>
                <el-table-column prop="address" label="土地承包权"> </el-table-column>
                <el-table-column prop="address" label="土地经营权"> </el-table-column>
                <el-table-column prop="address" label="合同面积（亩）"> </el-table-column>
                <el-table-column prop="address" label="单价（元/亩）"> </el-table-column>
                <el-table-column prop="address" label="价格（元/年）"> </el-table-column>
                <el-table-column prop="address" label="证明材料"> </el-table-column>
                <el-table-column prop="address" label="电子围栏"> </el-table-column>
                <el-table-column prop="address" label="操作" width="130">
                    <template #default="scope">
                        <el-button type="primary" link size="default">查看</el-button>
                        <el-button type="danger" link class="deletBtnColor" size="default">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="baseTableTip">说明：同一个土地承包权人的土地，若单价不一样，则登记多条合同信息。</div>
            <div class="btns">
                <el-button type="primary" size="default" @click="router.back()">返回</el-button>
                <el-button size="default">保存</el-button>
                <el-button size="default">删除土地资源</el-button>
                <el-button size="default">申请平台认证</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input = ref("");
const tableData: any = ref([{}, {}]);
const formInline: any = ref({});

// export default {
//     data() {
//         return {
//             input: "",
//             tableData: [{}, {}, {}, {}],
//             formInline: {},
//         };
//     },
//     methods: {
//         // 跳转到指定页面
//         toAssignPage(url, tag, title) {
//             this.$store.commit("setMenuIdentification", {
//                 tag,
//                 title,
//             });
//             this.$fn.setSelectMenu(url, tag);
//         },
//     },
// };
</script>
<style lang="scss" scoped>
.baseBox {
    width: 100%;
    .warmprompt {
        padding: 20px;
        background: #ffffff;
        .warmprompttitle {
            font-size: 16px;
            font-weight: bold;
            color: #252b3a;
        }
        .demo-form-inline {
            margin-top: 20px;
            .addRess {
                width: 300px;
            }
        }
    }
    .baseBoxContent {
        background: #ffffff;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.03);
        margin-top: 15px;
        padding: 30px 0;
        .baseBoxsearch {
            margin-bottom: 30px;
        }
        .baseBoxsearch,
        .basesright {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .input {
                width: 350px;
                margin-right: 20px;
            }
        }
        .baseTableTip {
            font-size: 16px;
            color: #333333;
            margin-top: 10px;
        }
        .btns {
            margin-top: 30px;
            button {
                margin-right: 20px;
            }
        }
    }
}
</style>
